<template>
  <div>
    <Breadcrumb :style="{ margin: '15px 0', float: 'left' }">
      <BreadcrumbItem>首页</BreadcrumbItem>
      <BreadcrumbItem>店铺管理</BreadcrumbItem>
      <BreadcrumbItem>物流配置</BreadcrumbItem>
    </Breadcrumb>
    <ButtonGroup :style="{ margin: '15px 0', float: 'right' }">
      <Button @click="btnAdd" type="primary">添加配置</Button>
    </ButtonGroup>
    <Content class="layer-content">
      <Table border :columns="columns" :data="dataGrid"></Table>
      <HigPager v-model="query" :total="pageTotal" :init="init"></HigPager>
    </Content>
    <Modal v-model="showCreate" :footer-hide="true" title="添加配置" width="60%">
      <CreateVue ref="refStoreCreate" :callbank="eventAction"></CreateVue>
    </Modal>
    <Modal v-model="showUpdate" :footer-hide="true" title="编辑配置" width="60%">
      <UpdateVue ref="refStoreUpdate" :dataBus="dataBusVo" :callbank="eventAction"></UpdateVue>
    </Modal>
  </div>
</template>
<script>
import UpdateVue from './update.vue'
import CreateVue from './create.vue'
export default {
  name: "purchase",
  data() {
    return {
      showCreate: false,
      showUpdate: false,
      dataBusVo: {},
      dataGrid: [],
      pageTotal: 0,
      query: {
        equal: {
          shopId: this.$store.getShop('shopId')
        },
        pageIndex: 1,
        pageSize: 15
      },
      columns: [
        {
          title: "地区名称",
          key: "provinceName",
        },
        {
          title: "商品分类",
          key: "categoryId",
          width: 300
        },
        {
          title: "基础运费(单品)",
          key: "baseFees",
          width: 180,
          render: (h, params) => {
            return h("span", params.row.baseFees ? params.row.baseFees.toFixed(2) : '0.00');
          },
        },
        {
          title: "是否包邮",
          key: "postalStatus",
          width: 120,
          render: (h, params) => {
            return h("Tag", params.row.postalStatus === 0 ? '否' : '是');
          },
        },
        {
          title: "是否默认",
          key: "defaultStatus",
          width: 120,
          render: (h, params) => {
            return h("Tag", params.row.defaultStatus === 0 ? '否' : '是');
          },
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          render: (h, params) => {
            return h("Dropdown",{props: {transfer:true,trigger:'click'}},
              [
                h("a",[h("a","下拉菜单"),h("Icon",{props: {type: "ios-arrow-down"}})]),
                h("DropdownMenu",{slot: "list"},
                  [
                    h("DropdownItem",{nativeOn:{click:()=>{this.EditView(params.row)}}},"编辑"),
                    h("DropdownItem",{nativeOn:{click:()=>{this.Delete(params.row)}},props:{divided:true}},"删除")
                  ]
                ),
              ]
            )
          }
        }
      ]
    }
  },
  created() {
    this.init()
  },
  components:{
    UpdateVue,
    CreateVue
  },
  methods: {
    eventAction() {
      this.showCreate = false
      this.showUpdate = false
      this.init()
    },
    btnAdd() {
      this.showCreate = true
    },
    EditView(item) {
      this.showUpdate = true
      this.dataBusVo = item
    },
    init(){
      new this.$rest({
        gateway: 'agroerp',
        service: 'agroerp-tms',
        url: '/v1.0/logistics/costs/config/page',
        query: this.query,
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data
            this.pageTotal = data.count
            this.dataGrid = data.list
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: res.data.msg
            })
          }
        }
      }).get()
    },
      
    /** 删除按钮操作 */
    Delete(row) {
      this.$Modal.confirm({
        title: '操作提示',
        content: '确定删除吗？',
        onOk: () => {
          new this.$rest({
            gateway: 'agroerp',
            service: 'agroerp-tms',
            url: '/v1.0/logistics/costs/config',
            data: {
              pojo: [row.logisticsCostsId]
            },
            action: (res) => {
              if (res.data.code === 20000) {
                this.$Message.success({
                  content: '删除成功',
                  duration: 1,
                  onClose: ()=> {
                    this.init()
                  }
                })
              } else {
                this.$Message.error(res.data.msg)
              }
            }
          }).delete()
        }
      })
    },
  }
}
</script>